<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .v-leave,
        .v-enter-to {
            transform: translateX(0);
            opacity: 1;
        }

        .v-leave-active,
        .v-enter-active {
            transition: 3s all;
        }

        .v-leave-to,
        .v-enter {
            transform: translateX(100%);
            opacity: 0;
        }

        .move-enter-active {
            animation: move 3s linear reverse;
        }

        .move-leave-active {
            animation: move 3s linear;
        }

        @keyframes move {
            0% {
                opacity: 1;
                transform: translateX(0);
            }

            50% {
                opacity: 0.8;
                transform: translateX(50%);
            }

            80% {
                opacity: 0.5;
                transform: translateX(80%);
            }

            100% {
                opacity: 0;
                transform: translateX(100%);
            }
        }
    </style>
</head>

<body>
    <div id="app">
        <button @click="isShow = !isShow">按钮</button>
        <transition-group>
            <p v-if="isShow" :key="1">测试显示隐藏</p>
            <p v-if="isShow" :key="2">测试显示隐藏</p>
        </transition-group>


        <transition name="move">
            <p v-if="isShow">试试就试试</p>
        </transition>


    </div>
    <script src="./js/vue.js"></script>
    <script>
        const vm = new Vue({
            data: {
                isShow: true,
            },

        });
        vm.$mount("#app");
    </script>
</body>

</html>